因緣際會下開始仔細研究redux-saga，讀著讀著就對於能實作出saga的 Generator function(function*)，有點好奇。
加上其實我還沒想好鐵人賽所有主題，所以今天就來好好研究一下他是誰以及他的寫法吧。

何為Generator function

JavaScript function開始執行後，就無法停止，不過Generator function的特別就在於它可以被暫停，可以在其他時候再去呼叫繼續執行。

這邊先來介紹他的基本語法吧：

1. Generator function：可以包含多個yield來達到暫停和繼續的目的。
2. Generator object：使用Generator function，回傳的值，format:{value:any,done:boolean}
3. yield：類似return，當結果未被回傳時function會被暫停，可以達到類似同步的效果。
4. next：在function外，可以用it.next()來控制function的執行順序。當跑到最後一筆yield之後，續續的Generator object done 則會變成true

// return結尾
function* generator(i) {
  yield i;
  yield i + 10;
  return 'finish';
}
const gen = generator(10);

console.log(gen.next()); // Object { value: 10, done: false }
console.log(gen.next()); // Object { value: 20, done: false }
console.log(gen.next()); // Object { value: "finish", done: true }

// 無return結尾
function* generator(i) {
  yield i;
  yield 'finish';
}
const gen = generator(10);

console.log(gen.next()); // Object { value: 10, done: false }
console.log(gen.next()); // Object { value: "finish", done: false }
console.log(gen.next()); // Object { value: undefined, done: true }

其實這樣看下來也就大概能了解到，其實Generator function就是將非同步的程式碼，以同步的樣子呈現。

下方來展示一下 redux-saga中使用到的樣子吧

function* fetchData() {
	try{
		const data= yield call(apiFunction, arg);
		yield put(setDate(data));
	}catch(error){
		console.log(error);
	}
}

yield會在前者成功後執行後續動作，使用yield來賦予值，就可以確保已透過api得到資料再來執行後續動作了，以及配合Error handling（try…catch），來達到流程控制及例外處理增加程式的互動性。

資料來源:
https://medium.com/@savemuse/初探es6特性-generator-10be4419546a